<template>
  <div class="route-path">
    <el-breadcrumb separator-icon="ArrowRight">
      <el-breadcrumb-item v-for="route in routes" :key="route.path" v-bind="formatRoute(route)">
        <div v-if="route.children.length">
          <el-dropdown>
            <span class="el-dropdown-link">
              {{ route.meta.name }}
            </span>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item v-for="item in formatRoutes(route.children)" :key="item.path">
                  <router-link :to="item.path">{{ item.meta.name }}</router-link>
                </el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
        <span v-else>{{ route.meta.name }}</span>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script setup>
const route = useRoute()
const routes = computed(() => {
  return route.matched.filter((item) => item.name !== 'Root')
})

function formatRoute(routeRow) {
  if (routeRow.fullPath !== route.fullPath) {
    if (route.meta.currentActiveMenu) {
      return {
        to: route.meta.currentActiveMenu,
      }
    }
    return {}
  }
  return {}
}

function formatRoutes(routes) {
  return routes.filter((v) => !v.meta.currentActiveMenu)
}
</script>

<style scoped></style>
